<template>
  <section class="login-page">
    <aside class="login-page-aside">
      <login-brand style="width: 160px;margin: 1.5rem 1rem;color: #222;"></login-brand>
      <small style="position: absolute;left: 170px;top:40px;">v{{ appVersion }}</small>
    </aside>
    <div class="login-page-main">
      <el-card class="form" shadow="never">
        <div class="text-center" style="margin-bottom: 20px;margin-top: 15px;">
          <h1>登录</h1>
        </div>
        <el-form size="medium" @submit.native.prevent>
          <el-form-item>
            <el-input v-model="account" placeholder="用户名" type="text">
              <template #prepend>
                <svg-icon class="form-icon" name="account"></svg-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="password" placeholder="密码" type="password">
              <template #prepend>
                <svg-icon class="form-icon" name="password"></svg-icon>
              </template>
            </el-input>
          </el-form-item>
          <p>登录即代表您已阅读并同意<span style="color: var(--theme-color);" @click="clickPrivacy">《隐私条款》</span></p>
          <el-form-item>
            <el-button
              :loading="submitting" class="submit-button" native-type="submit"
              type="primary" @click="onSubmit"
            >登录
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <privacy-modal ref="modal"></privacy-modal>
  </section>
</template>

<script>
import LoginBrand from '@/components/site-brand/login-brand'
import PrivacyModal from '@/views/login/privacy-modal'

export default {
  name: 'login-index',
  components: { LoginBrand, PrivacyModal },
  computed: {
    title () {
      return this.$store.state.logoTitle
    },
    appVersion () {
      return this.$store.state.version
    },
  },
  data () {
    return {
      account: '',
      password: '',
      submitting: false
    }
  },
  methods: {
    clickPrivacy () {
      this.$refs.modal.open()
    },
    onSubmit () {
      const {
        account,
        password
      } = this
      let errMsg = ''
      if (!account) {
        errMsg = '请输入用户名'
      }
      if (!password) {
        errMsg = '请输入密码'
      }

      if (errMsg) {
        return this.$message.error(errMsg)
      }
      this.submitting = true
      this.$store.dispatch('user/login', {
        loginName: this.account,
        passWord: this.password
      }).then(() => {
        const path = this.$route.query.returnUrl || '/'
        this.$router.replace({
          path: path
        }, (err) => {
          console.log(err)
        })
      }).finally(() => {
        this.submitting = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.login-page {
  width: 100vw;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  display: flex;
  &-aside {
    width: 40%;
    max-width: 700px;
    min-width: 400px;
    height: 100%;
    background-color: #f9f9f9;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 70% center;
  }
  &-main {
    flex: 1;
    background: #fff;
    height: 100%;
    position: relative;
  }
}

.form {
  width: 400px;
  box-sizing: border-box;
  border: 0;
  background: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  ::v-deep .el-input-group__append,
  ::v-deep .el-input-group__prepend {
    padding-left: 10px;
    padding-right: 10px;
  }
}

.form-icon {
  font-size: 1.2em;
}

.submit-button {
  display: block;
  width: 100%;
}
</style>
